<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"
    />

    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121212" />
    <!-- favicon -->
    <link rel="icon" href="/favicon.ico" sizes="48x48" type="image/x-icon" />
    <link rel="icon" href="/icon.svg" sizes="any" type="image/svg+xml" />
    <!-- FireFox -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />

    <title>Folo - AI-Driven RSS Reader | Follow Everything</title>
    <meta
      name="description"
      content="Folo organizes content into one timeline, keeping you updated on what matters, noise-free. AI-powered RSS reader with translation, summary, and dynamic content support. Available on iOS, Android, macOS, Windows, and Linux."
    />
    <meta
      name="keywords"
      content="RSS reader, feed aggregator, AI-powered, content curation, timeline, news reader, follow feeds, social media aggregator, distraction-free browsing, cross-platform, open source, Folo, Follow Everything, AI translation, AI summary, dynamic content, video feeds, audio feeds, image feeds, RSS subscription, feed management, news aggregator, content hub, information hub, RSSNext, electron app, mobile app, desktop app, web app, iOS app, Android app, macOS app, Windows app, Linux app, noise-free feeds, curated lists, share lists, explore collections, POWER token, ownership economy, tip creators, community-driven, GitHub trending"
    />
    <meta name="author" content="Follow Team" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="en" />
    <link rel="canonical" href="https://app.folo.is" />

    <!-- Apple Meta Tags -->
    <meta name="apple-itunes-app" content="app-id=6739802604" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Folo" />

    <!-- OpenGraph Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Folo" />
    <meta property="og:title" content="Folo - AI-Driven RSS Reader | Follow Everything" />
    <meta property="og:url" content="https://app.folo.is" />
    <meta property="og:image" content="https://app.folo.is/og-image.png" />
    <meta property="og:image:alt" content="Folo - AI-Driven RSS Reader" />
    <meta
      property="og:description"
      content="Organize content into one timeline, keeping you updated on what matters, noise-free. AI-powered features like translation, summary, and more. Share lists, explore collections, and enjoy distraction-free browsing."
    />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@folo_is" />
    <meta name="twitter:creator" content="@folo_is" />
    <meta name="twitter:title" content="Folo - AI-Driven RSS Reader | Follow Everything" />
    <meta
      name="twitter:description"
      content="Folo organizes content into one timeline, keeping you updated on what matters, noise-free. AI-powered RSS reader with translation, summary, and dynamic content support. Available on iOS, Android, macOS, Windows, and Linux."
    />
    <meta name="twitter:image" content="https://app.folo.is/og-image.png" />
    <meta name="twitter:image:alt" content="Folo - AI-Driven RSS Reader" />

    <!-- Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Folo",
        "alternateName": "Follow Everything",
        "description": "AI-driven, user-friendly RSS reader that organizes content into one timeline, keeping you updated on what matters, noise-free. Share lists, explore collections, and enjoy distraction-free browsing.",
        "url": "https://app.folo.is",
        "image": "https://app.folo.is/og-image.png",
        "applicationCategory": "ProductivityApplication",
        "operatingSystem": ["iOS", "Android", "macOS", "Windows", "Linux", "Web"],
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "publisher": {
          "@type": "Organization",
          "name": "RSSNext",
          "url": "https://github.com/RSSNext"
        },
        "downloadUrl": [
          "https://apps.apple.com/us/app/folo-follow-everything/id6739802604",
          "https://play.google.com/store/apps/details?id=is.follow",
          "https://apps.microsoft.com/detail/9nvfzpv0v0ht?mode=direct",
          "https://github.com/RSSNext/Folo/releases/latest"
        ],
        "screenshot": [
          "https://github.com/user-attachments/assets/11dc7d21-f5d8-4e41-9269-24fc352aa02b",
          "https://github.com/user-attachments/assets/37cf4f2f-4c5e-4775-86e8-2fa1a1b2ecf5",
          "https://github.com/user-attachments/assets/d1379fd6-8767-476e-b0dc-d61753715e26"
        ],
        "featureList": [
          "Customized Information Hub",
          "AI-powered translation and summary",
          "Dynamic content support (articles, videos, images, audio)",
          "Distraction-free browsing",
          "Cross-platform availability",
          "Open source community-driven"
        ],
        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "4.8",
          "ratingCount": "1000",
          "bestRating": "5",
          "worstRating": "1"
        }
      }
    </script>
    <!-- Check Browser Script Inject -->

    <script>
      function setTheme() {
        let e = "follow:color-mode",
          t = document.documentElement,
          a = localStorage.getItem(e)
        function h() {
          return window.matchMedia
            ? window.matchMedia("(prefers-color-scheme: dark)").matches
              ? "dark"
              : window.matchMedia("(prefers-color-scheme: light)").matches
                ? "light"
                : void 0
            : void 0
        }
        if (!a) {
          t.dataset.theme = h() || "light"
          return
        }
        switch ((a = JSON.parse(a))) {
          case "dark":
            t.dataset.theme = "dark"
            break
          case "light":
            t.dataset.theme = "light"
            break
          case "system":
            t.dataset.theme = h() || "light"
        }
      }
      setTheme()
      // Can not get window.electron so check userAgent
      const isElectron = navigator.userAgent.includes("Electron")
      document.documentElement.dataset.buildType = isElectron ? "electron" : "web"
    </script>
    <script>
      const isMobile = window.innerWidth < 1024
      document.documentElement.dataset.viewport = isMobile ? "mobile" : "desktop"
    </script>
  </head>
  <body>
    <div id="root"></div>

    <div id="app-skeleton" class="drag-region">
      <!-- Skeleton -->
      <style>
        [data-build-type]:not([data-build-type="electron"]) #root {
          background-color: hsl(var(--background));
        }
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
        #app-skeleton {
          position: fixed;
          inset: 0;
          z-index: 1000;
        }
        [data-viewport="mobile"] #app-skeleton {
          display: none;
        }
        [data-theme="light"] {
          --background: 0 0% 100%;
        }

        [data-theme="dark"] {
          --background: 0 0% 7.1%;
        }
        .skeleton {
          display: flex;
          height: 100%;
          width: 100%;
        }

        .sidebar {
          width: 16rem;
          flex-shrink: 0;
          height: 100%;
          background-color: hsl(var(--fo-sidebar));
        }
        [data-build-type="electron"] .sidebar {
          background-color: hsl(var(--fo-sidebar) / 0.3);
        }
        [data-build-type="electron"][data-theme="dark"] .sidebar {
          background-color: hsl(var(--fo-sidebar) / 0.1);
        }
        .content {
          flex-grow: 1;
          width: 100%;
          height: 100%;
          background-color: hsl(var(--background));
        }

        [data-theme="light"] {
          --fo-sidebar: 240 1.6% 87.6%;
        }
        [data-theme="dark"] {
          --fo-sidebar: 30 1.7% 23.5%;
        }

        [data-build-type="web"] {
          --fo-sidebar: 240 4.8% 95.9%;
        }

        [data-build-type="web"][data-theme="dark"] {
          --fo-sidebar: 220 8.1% 14.5%;
        }
      </style>
      <div class="skeleton">
        <div class="sidebar"></div>
        <div class="content"></div>
      </div>
    </div>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

<!-- HTML标签说明列表：

1. !DOCTYPE html - 文档类型声明，指定当前HTML文档遵循HTML5标准

2. html - HTML文档的根元素，包含整个网页内容，lang属性指定页面语言为英文

3. head - 包含文档的元数据，如标题、字符集、样式、脚本引用等不直接显示的内容

4. meta - 提供文档的元数据信息：
   - charset="UTF-8"：指定文档使用UTF-8字符编码
   - name="referrer"：控制HTTP引用头信息
   - name="viewport"：设置视口参数，控制移动设备上的显示效果
   - name="theme-color"：设置浏览器UI主题颜色，根据深色/浅色模式显示不同颜色

5. link - 用于链接外部资源：
   - 引入图标（favicon.ico, icon.svg, apple-touch-icon）
   - rel="canonical"：指定规范化URL，用于SEO优化

6. title - 定义网页标题，显示在浏览器标签页上

7. script - 嵌入或引用JavaScript代码：
   - type="application/ld+json"：用于结构化数据标记
   - 普通script标签：包含内联JavaScript代码
   - type="module"：引入ES模块格式的JavaScript文件

8. body - 包含网页的主要内容，用户可见的部分

9. div - 通用块级容器元素，用于组织页面结构：
   - id="root"：React应用的挂载点
   - id="app-skeleton"：应用加载骨架屏
   - class="skeleton"：骨架屏布局容器
   - class="sidebar"：侧边栏容器
   - class="content"：主内容区域容器

10. style - 嵌入CSS样式规则，定义页面外观

11. style标签内的CSS选择器和规则：
    - 属性选择器（如[data-theme="light"]）：基于HTML属性设置样式
    - 元素选择器（如html, body）：为特定元素设置样式
    - ID选择器（如#app-skeleton）：为特定ID的元素设置样式
    - 类选择器（如.sidebar）：为特定类的元素设置样式
    - 组合选择器（如[data-build-type="electron"].sidebar）：基于多个条件设置样式

这个HTML文件是一个现代React应用的入口页面，包含以下特点：
- 完整的元数据配置，优化SEO和社交媒体分享
- 响应式设计支持，适配不同设备视口
- 深色/浅色主题切换功能
- 应用骨架屏，提升加载体验
- Electron和Web平台的条件样式支持
- 结构化数据标记，增强搜索引擎理解
- 模块化JavaScript引入方式
-->
